<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en" ng-app="fm"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en" ng-app="fm"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"  ng-app="fm"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" ng-app="fm"> <!--<![endif]-->
<head>
	<meta charset="UTF-8">
	<title ng-bind="$root.title+' - FM'"></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!--[if IE]>
		<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
	<![endif]-->
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
        <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="pkgs/angular-loading-bar.css">
    <link rel="stylesheet" href="css/angularstrap/angular-motion.min.css"/>
    <link rel="stylesheet" href="css/angularstrap/bootstrap-additions.min.css"/>
    <link rel="stylesheet" href="css/highlight.github.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <p></p>

    <div class="container">
        <div class="row" ng-controller="FmCtrl">
            <div class="col-md-4">
                <ul class="list-group">
                    <li class="list-group-item am-fade" ng-repeat="i in cl.channels"  ng-click="peopleList(i.channel_id)">
                        <span>{{i.name}}</span>
                        <span>{{i.name_en}}</span>
                    </li>
                </ul>
            </div>
            <div class="col-md-4">
                <ul class="list-group">
                    <li class="list-group-item am-fade" ng-repeat="i in pl.song" >
                        <span>{{i.artist}}</span>
                        <span>{{i.title}}</span>
                        <!-- <button class="btn" ng-click="toPlay(i)"> <i class="fa fa-play"></i> </button> -->
                    </li>
                </ul>

                <h3>play list</h3>

                <ul class="list-group">

                    <li class="list-group-item am-fade" ng-repeat="i in playList" ng-class-odd="'odd'" ng-class-even="'event'" ng-class="{active: boolean(nowIndex==$index)}" >
                        <span class="label label-info"> {{$index}} </span> 
                        &nbsp;
                        <span>{{i.artist}}</span> - 
                        <span>{{i.title}}</span>
                        <span class="badge">{{i.length|formatTimeFilter}}</span>
                    </li>
                </ul>
            </div>

            <div class="col-md-4 list-group" ng-if="showPlayer" >
                <div class="list-group-item text-center">
                    <!-- audio player -->
                    <audio media-player="mediaPlayer" playlist="playList"></audio>
                
                    <!-- player btns -->
                    <div class="btn-group">
                        <button  class="btn btn-default" ng-click="mediaPlayer.play()">
                            Simple Play <i class="fa fa-play"></i>
                        </button>

                        <button class="btn btn-default" ng-click="mediaPlayer.prev()">
                            <i class="fa fa-step-backward"></i>
                            <span>Prev</span>
                        </button>

                        <button class="btn btn-default" ng-click="mediaPlayer.playPause()">
                            <i class="fa" ng-class="{ 'fa-pause': mediaPlayer.playing, 'fa-play': !mediaPlayer.playing }"></i>
                        </button>

                        <button class="btn btn-default" ng-click="mediaPlayer.next()">
                            <span>Next</span>
                            <i class="fa fa-step-forward"></i>
                        </button>
                    </div>
                </div> 

                <div class="list-group-item">
                    <div class="btn" disabled="disabled">currentTrack: </div>
                    <div class="btn-group pull-right">
                        <div class="btn btn-success"> <span class="badge"> {{ mediaPlayer.currentTrack }} / {{mediaPlayer.tracks}} </span> </div>
                        <div class="btn btn-info"> <i class="fa fa-clock-o"></i> <span class="badge">{{ mediaPlayer.formatTime }} </span> </div>
                    </div>
                </div>

                <div class="list-group-item">
                    <div class="btn" disabled="disabled"> volume: </div>
                    <div class="btn-group pull-right">
                        <button class="btn btn-default" ng-click="mediaPlayer.setVolume(mediaPlayer.volume - 0.1)">
                            <span><i class="fa fa-volume-down"></i></span>
                        </button>
                        <button class="btn btn-success" ng-click="mediaPlayer.setVolume(mediaPlayer.volume + 0.1)">
                            <span><i class="fa fa-volume-up"></i></span>
                        </button>
                        <div class="btn btn-success" >
                            <span class="badge">{{ mediaPlayer.volume * 100 | number:0 }}%</span>
                        </div>
                    </div>
                </div>

                <div class="list-group-item">
                        <div class="progress" ng-click="mediaPlayer.seek(mediaPlayer.duration * seekPercentage($event))">
                            <div class="progress-bar" role="progressbar" aria-valuenow="{{mediaPlayer.currentTime*100/mediaPlayer.duration }}" aria-valuemin="0" aria-valuemax="100" ng-style="{ width: mediaPlayer.currentTime*100/mediaPlayer.duration + '%' }"></div>
                            <div class="time" ng-show="mediaPlayer.formatTime">
                              <span>{{ mediaPlayer.formatTime }}</span> - <span>{{ mediaPlayer.formatDuration }}</span>
                            </div>
                        </div>
                </div>

                <div class="list-group-item thumbnail">
                    <!-- <img ng-src="{{playList[mediaPlayer.currentTrack].picture}}" alt="">  -->
                    <div class="hide"> {{ nowIndex = mediaPlayer.currentTrack > 0 ? mediaPlayer.currentTrack-1: 0; }}</div>
                    <div class="caption">
                        <h4>{{playList[nowIndex].title}}</h4>
                        <p> 
                            <strong>{{playList[nowIndex].artist}}</strong> <br>

                            <table>
                                <tr>
                                    <th>artist</th>
                                    <td>{{playList[nowIndex].artist}} </td>
                                </tr>

                                <tr>
                                    <th>title</th>
                                    <td>{{playList[nowIndex].title}} </td>
                                </tr>

                                <tr>
                                    <th>albumtitle</th>
                                    <td>{{playList[nowIndex].albumtitle}} </td>
                                </tr>

                                <tr>
                                    <th>publictime</th>
                                    <td>{{playList[nowIndex].publictime}} </td>
                                </tr>
                            </table>

                       </p>
                    </div>
                </div>

            </div> <!-- end col4 -->
        </div> <!-- end row -->
    </div> <!--  end container-->

    <!-- <script src="js/jquery.min.js"></script> -->
    
    <script src="angular/angular.min.js"></script>
    <script src="pkgs/angular-route.js"></script>
    <script src="angular/angular-resource.min.js"></script>
    <script src="angular/angular-animate.min.js"></script>
    <script src="angular/angular-sanitize.min.js"></script>

    <script src="pkgs/angular-strap.min.js"></script>
    <script src="pkgs/angular-strap.tpl.min.js"></script>
    <script src="pkgs/angular-loading-bar.min.js"></script>
    <script src="pkgs/angular-media-player.js"></script>
	
    <script src="app/directives.js"></script>
    <script src="app/filters.js"></script>
	<script src="app/services.js"></script>
	<script src="app/controllers.js"></script>
	<script src="app/app.js"></script>

</body>
</html>
